<template>
	<div style="background: #fff;">
		<el-popover placement="bottom-start" width="500" trigger="manual" style="padding: 0;" v-model="rliShow">
			<el-calendar class="jkzx-calendar" v-model="curDate">
				<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
				<template slot="dateCell" slot-scope="{date, data}">
					<div @click="selectDay(data)">
						<p :class="data.isSelected ? 'is-selected' : ''">
							{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}
						</p>
						<p>
							{{getCdata(data.day)}}
						</p>
					</div>
				</template>
			</el-calendar>
			<el-button slot="reference" size="mini" @click="rliShow = !rliShow">日历</el-button>
		</el-popover>
		<el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
			placeholder="选择时间范围" size="mini" @change="changeTimeRange">
		</el-time-picker>
	</div>
</template>

<script>
	import {
		getLc
	} from '@/api/cljk.js';
	export default {
		name: 'headerTools',
		props: {
			nodes: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
		},
		watch: {
			nodes: function(val) {
				this.initCalendar()
			},
			curDate: function(val, old) {
				if ((val.getFullYear() !== old.getFullYear()) || (val.getMonth() !== old.getMonth())) {
					this.initCalendar()
				}
			}
		},
		data() {
			return {
				rliShow: false,
				curDate: new Date(),
				cData: new Map(),
				value1: [new Date(new Date().getTime() - 2 * 60 * 60 * 1000), new Date()]
			}
		},
		methods: {
			selectDay(data) {
				this.$emit('selected-day', data.day)
			},
			changeTimeRange(p) {
				var shours = p[0].getHours();
				var sminutes = p[0].getMinutes();
				var sseconds = p[0].getSeconds();
				var startH = (shours < 10 ? "0" : "") + shours + ":" +
					(sminutes < 10 ? "0" : "") + sminutes + ":" +
					(sseconds < 10 ? "0" : "") + sseconds;

				var ehours = p[1].getHours();
				var eminutes = p[1].getMinutes();
				var eseconds = p[1].getSeconds();
				var endH = (ehours < 10 ? "0" : "") + ehours + ":" +
					(eminutes < 10 ? "0" : "") + eminutes + ":" +
					(eseconds < 10 ? "0" : "") + eseconds;

				this.$emit('selected-hour', {
					startHour: startH,
					endHour: endH
				})
			},
			getCdata(day) {
				var rs = this.cData.get(day)
				if (rs) {
					return rs + ' km'
				} else {
					return 0 + ' km'
				}

			},


			formatDate(date) {
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			initCalendar() {
				var now = this.curDate
				var nowYear = now.getFullYear() //当前年
				var nowMonth = now.getMonth() //当前月 （值为0~11）
				var d = now.getDate() //当天
				var firstDay = new Date(nowYear, nowMonth, 1) // 本月开始时间
				var LastDay = new Date(nowYear, nowMonth + 1, 0); // 本月结束时间
				var toDay = new Date(nowYear, nowMonth, d) // 本月今天
				if (this.nodes) {
					getLc({
						vehId: this.nodes.id,
						startTime: this.formatDate(firstDay) + " 00:00:00",
						endTime: this.formatDate(LastDay) + " 23:59:59"
					}).then(res => {
						if (res.code === 200) {
							this.cData = new Map()
							for (var i = 0; i < res.data.length; i++) {
								this.cData.set(res.data[i].lcday, res.data[i].lc)
							}
						}
					}).catch(err => {
						console.log(err)
					})
				}

			}


		},
		mounted() {
			this.initCalendar()
		}
	}
</script>

<style>
</style>